<!--  -->
<template>
  <div>
    <div class="container">
      <div class="top">
      </div>
      <div class="content">
        <p class="position">
          <img src="../../../static/img/position.png">
          <span class="address">{{district}}</span>
        </p>
        <!-- <span class="address">上海</span> -->
      </div>
      <div class="info">
        <span class="gradus">{{now.temperature}}°</span>
        <img :src="now.weather_pic">
        <!-- <img :src="'../../../static/img/weather/'+iconArr[0]+'.png'"> -->
        <div class="size">
          <span>{{now.weather}}</span>
        </div>
      </div>

      <div class="weatherInfo">
        <div
          class="date"
          v-for="(item,index) in weatherList"
          :key="index"
        >
          <div class="detail">
            <span>{{item.day}}</span>
            <div class="img">
              <!-- <img :src="'../../../static/img/weather/'+item.icon+'.png'"> -->
              <img :src="item.day_weather_pic">
            </div>
            <div class="highest">
              <span>{{item.day_air_temperature}}°</span>
            </div>
            <div class="bar">
            </div>
            <img :src="item.night_weather_pic">
            <div class="lowest">
              <span>{{item.night_air_temperature}}°</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      latitude: "",
      longitude: "",
      district: "",
      now: [],
      weatherList: [],
      counter: 1
    };
  },
  methods: {},
  components: {},
  mounted() {
    wx.getLocation({
      type: "wgs84", //默认为 wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标,
      success: res => {
        // console.info("getLocation success: ", res);
        const latitude = res.latitude;
        const longitude = res.longitude;
        const speed = res.speed;
        const accuracy = res.accuracy;
        this.latitude = latitude;
        this.longitude = longitude;
        // console.log(latitude, longitude)
        let mapUrl =
          "https://apis.map.qq.com/ws/geocoder/v1/?location=" +
          latitude +
          "," +
          longitude +
          "&key=XEDBZ-RSGK6-5EGSI-MQTGN-O3CHO-NNFAU";
        this.$http.get(mapUrl).then(res => {
          // console.log(res)
          var district = res.data.result.address_component.district;
          let dictUrl = "https://wx.2xur7.cn/weapp/dict";
          let dictData = {
            txt: district,
            from: "zh"
          };
          this.$http.post(dictUrl, dictData).then(res => {
            this.district = res.data.data.res_txt;
          });
          let getUrl =
            "https://weather.market.alicloudapi.com/area-to-weather?area=" +
            district;
          let data = {
            needMoreDay: 1
          };
          var weatherTime = parseInt(wx.getStorageSync("weatherTime"));
          var dd = new Date();
          var nowTime = dd.getTime();
          var forecast = wx.getStorageSync("weatherList");
          let nowWeather = wx.getStorageSync("nowWeather");
          if (
            nowTime - weatherTime > 6 * 60 * 60 * 1000 ||
            !forecast ||
            !weatherTime
          ) {
            this.$http.get(getUrl, data).then(res => {
              var result = res.data.showapi_res_body;
              switch (result.now.weather) {
                case "晴":
                  result.now.weather = "ئوچۇق";
                  break;
                case "多云":
                  result.now.weather = "بۇلۇتلۇق";
                  break;
                case "阴":
                  result.now.weather = "تۇتۇق";
                  break;
                case "阵雨":
                  result.now.weather = "ئۆتكۈنچى يامغۇر";
                  break;
                case "雷阵雨":
                  result.now.weather = "ئۆتكۈنچى يامغۇر";
                  break;
                case "雨夹雪":
                  result.now.weather = "يامغۇر ئارىلاش قار";
                  break;
                case "小雨":
                  result.now.weather = "ئاز يامغۇر";
                  break;
                case "中雨":
                  result.now.weather = "ئوتتۇرا ھال يامغۇر";
                  break;
                case "大雨":
                  result.now.weather = "قاتتىق يامغۇر";
                  break;
                case "暴雨":
                  result.now.weather = "قارا يامغۇر";
                  break;
                case "大暴雨":
                  result.now.weather = "قارا يامغۇر";
                  break;
                case "特大暴雨":
                  result.now.weather = "قارا يامغۇر";
                  break;
                case "阵雪":
                  result.now.weather = "ئۆتكۈنچى قار";
                  break;
                case "小雪":
                  result.now.weather = "سېرىق قار";
                  break;
                case "中雪":
                  result.now.weather = "ئوتتۇرا ھال قار";
                  break;
                case "大雪":
                  result.now.weather = "قېلىن قار";
                  break;
                case "暴雪":
                  result.now.weather = "قارا قار";
                  break;
                case "雾":
                  result.now.weather = "تۇمان";
                  break;
                case "冻雨":
                  result.now.weather = "مۇز دانچىلىرى يېغىنى";
                  break;
                case "沙尘暴":
                  result.now.weather = "قۇم - بوران";
                  break;
                case "小到中雨":
                  result.now.weather = "ئوتتۇراھال يامغۇر";
                  break;
                case "中到大雨":
                  result.now.weather = "ئوتتۇرا ھال يامغۇر";
                  break;
                case "大到暴雨":
                  result.now.weather = "قارا يامغۇر";
                  break;
                case "暴雨到大暴雨":
                  result.now.weather = "قارا يامغۇر";
                  break;
                case "大暴雨到特大暴雨":
                  result.now.weather = "قارا يامغۇر";
                  break;
                case "小到中雪":
                  result.now.weather = "كىچىك قار";
                  break;
                case "中到大雪":
                  result.now.weather = "چوڭ قار";
                  break;
                case "大到暴雪":
                  result.now.weather = "قارا قار";
                  break;
                case "浮尘":
                  result.now.weather = "چاڭ - توزان";
                  break;
                case "扬沙":
                  result.now.weather = "قۇم";
                  break;
                case "强沙尘暴":
                  result.now.weather = "قاتتىق قۇم - بوران";
                  break;
                case "霾":
                  result.now.weather = "تۈتەك";
                  break;
                case "雨":
                  result.now.weather = "يامغۇر";
                  break;
                case "雪":
                  result.now.weather = "قار";
                  break;
                default:
                  break;
              }
              this.now = result.now;
              wx.setStorageSync("nowWeather", result.now);
              // let f1 = result.f1
              let f2 = result.f2;
              let f3 = result.f3;
              let f4 = result.f4;
              let f5 = result.f5;
              let f6 = result.f6;
              let f7 = result.f7;
              var weatherList = [];
              weatherList.push(f2, f3, f4, f5, f6, f7);
              for (const i in weatherList) {
                weatherList[i].day =
                  weatherList[i].day.slice(4, 6) +
                  "/" +
                  weatherList[i].day.slice(6, 8);
              }
              this.weatherList = weatherList;
              wx.setStorageSync("weatherList", weatherList);
              let d = new Date();
              let nowT = d.getTime();
              wx.setStorageSync("weatherTime", nowT);
              // console.log(this.weatherList)
            });
          } else {
            this.weatherList = forecast;
            this.now = nowWeather;
          }
        });
      }
    });
  }
};
</script>
<style lang='scss'>
page {
  background-color: #218efb;
}
.container {
  text-align: center;
  .top {
    padding-bottom: 43rpx;
  }
  .content {
    position: relative;
    .position {
      float: left;
      margin-left: 50rpx;
      color: whitesmoke;
      img {
        width: 50rpx;
        height: 50rpx;
        margin-bottom: -7rpx;
        margin-left: 25rpx;

        // color: rgb(255,175,216)
      }
      .address {
        margin-left: 25rpx;
      }
    }
  }
  .info {
    margin-top: 120rpx;
    text-align: left;
    margin-left: -31rpx;
    color: whitesmoke;
    .gradus {
      font-family: "微软雅黑" !important;
      margin-left: 100rpx;
      color: whitesmoke;
      font-size: 150rpx;
      font-weight: lighter !important;
    }
    img {
      margin-left: -4rpx;
      width: 80rpx;
      height: 80rpx;
    }
    .size {
      text-align: center;
      margin-left: 152rpx;
      font-size: 40rpx;
      margin-top: -100rpx;
    }
  }

  .weatherInfo {
    margin: 0 auto;
    margin-top: 112rpx;
    width: 96%;
    display: flex;
    justify-content: space-around;
    .date {
      width: 16%;
      .detail {
        font-family: "微软雅黑" !important;
        color: #5edaff;
        img {
          margin-top: 30rpx;
          width: 60rpx;
          height: 60rpx;
          margin-bottom: 30rpx;
        }
        .bar {
          margin-top: 20rpx;
          width: 15rpx;
          height: 200rpx;
          background-color: whitesmoke;
          border-radius: 15px;
          margin: 0 auto;
          margin-bottom: 20rpx;
        }
        .highest {
          margin-bottom: 22rpx;
        }
        .lowest {
          margin-top: -10rpx;
        }
      }
    }
  }
}
</style>

